<template>
    <el-form class="apply-form" :rules="rules" ref="apply-form" :model="form" label-width="80px">
        <el-row>
            <h3>基本信息</h3>
            <el-col class="base-info" :span="24">
                <el-col class="base-info" :span="12">
                    <el-col class="base-info" :span="24">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="填写你的名字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="base-info" :span="24">
                        <el-form-item label="班级" prop="className">
                            <el-input v-model="form.className" placeholder="填写你的班级"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="base-info" :span="24">
                        <el-form-item label="学号" prop="studentId">
                            <el-input v-model="form.studentId" placeholder="填写你的学号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="base-info" :span="24" style="text-align: left;">
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model.number="form.gender">
                                <el-radio :label="1" border>男生</el-radio>
                                <el-radio :label="2" border>女生</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-col v-if="false" :span="7">
                    <el-upload class="avatar-uploader" action="" :show-file-list="false">
                        <img v-if="form.portrait" :src="form.portrait" class="avatar">
                        <i style="height: 162px; line-height: 162px;" v-else class=" el-icon-plus avatar-uploader-icon "></i>
                    </el-upload>
                </el-col>
            </el-col>
        </el-row>
        <el-row>
            <h3>联系方式</h3>
            <el-col class="contact-info">
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="微信号" prop="wechat">
                    <el-input v-model="form.wechat" placeholder="微信号"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <h3>学习情况</h3>
            <el-col class="base-info" :span="18">
                <el-col class="base-info" :span="24">
                    <el-form-item label="主攻方向 " prop="major">
                        <el-autocomplete v-model="form.major " :fetch-suggestions="autoMajor" placeholder="填写或选择你的主攻方向"></el-autocomplete>
                    </el-form-item>
                </el-col>
                <el-col class="base-info" :span="24">
                    <el-form-item label="自我介绍 " prop="introduce">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入内容" v-model="form.introduce">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-col>
        </el-row>
        <el-row>
            <el-button :loading="loading" type="primary" @click="onSubmit('apply-form')">提交申请</el-button>
            <el-button @click="resetForm('apply-form')">重置</el-button>
        </el-row>
    </el-form>
</template>

<script>
import { REQUEST_STATUS } from "../utils/constants";
import storage from "../utils/storage";
import api from "@/api.js";

export default {
  name: "apply-form",
  data() {
    return {
      loading: false,
      form: {
        name: "",
        gender: "",
        className: "",
        studentId: "",
        portrait: "https://s1.ax1x.com/2018/09/25/iKJXkT.png",
        major: "",
        phoneNumber: "",
        wechat: "",
        email: "",
        introduce: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入你的名字", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        className: [
          { required: true, message: "请输入你的班级", trigger: "blur" },
          { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
        ],
        studentId: [
          { required: true, message: "请输入你的学号", trigger: "blur" },
          { min: 10, max: 10, message: "请输入正确长度的学号", trigger: "blur" }
        ],
        major: [{ max: 64, message: "太多了", trigger: "blur" }],
        phoneNumber: [
          { required: true, message: "请输入你的手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" }
        ],
        wechat: [{ max: 64, message: "太多了", trigger: "blur" }],
        introduce: [
          { required: true, message: "请输入你的个人简介", trigger: "blur" },
          { max: 255, message: "太多了 250字以内", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    const formData = storage.get(this.name);
    if (formData !== null) {
      this.form = formData;
    }
  },
  watch: {
    form: {
      deep: true,
      handler: function (val) {
        storage.set(this.name, val);
      }
    }
  },
  methods: {
    autoMajor(qs, cb) {
      cb([
        { value: "Web开发" },
        { value: "移动应用开发" },
        { value: "物联网开发" },
        { value: "桌面软件开发" },
        { value: "嵌入式开发" },
        { value: "算法竞赛" },
        { value: "后台开发" }
      ]);
    },
    validate(formName) {
      let validResult = false;
      this.$refs[formName].validate(valid => {
        if (valid) {
          validResult = true;
        } else {
          validResult = false;
        }
      });
      return validResult;
    },
    async onSubmit(formName) {
      if (!this.validate(formName)) {
        return;
      }
      this.loading = true;

      try {
        const { data } = await api.submitApplyForm(this.form);
        if (data.status === REQUEST_STATUS.SUCCESS) {
          this.$message({
            showClose: true,
            message: "恭喜你，提交成功",
            type: "success"
          });
        } else {
          this.$message({
            showClose: true,
            message: "提交失败",
            type: "error"
          });
        }
      } catch (error) {
        window.console.log(error);
      }
      this.loading = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      storage.remove(this.name);
    }
  }
};
</script>

<style lang="scss" scoped>
.apply-form {
  margin: 0 auto;
  width: 960px;
}

.el-row {
  box-sizing: border-box;
  padding: 25px;
  h3 {
    margin: 0 auto 25px;
    padding: 0 0 8px 0;
    max-width: 960px;
    text-align: left;
    color: #909399;
    border-bottom: 1px dotted #c0c4cc;
  }
}

.base-info,
.contact-info {
  display: flex;
  flex-wrap: wrap;
}
.contact-info {
  .el-form-item {
    width: 37.5%;
  }
}

.el-radio.is-bordered {
  width: 106px;
  padding-left: 23px;
}

.el-autocomplete,
.el-form-item {
  width: 100%;
}

.el-form-item__label {
  text-align: right;
}
</style>

<style>
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  left: 5px;
  overflow: hidden;
}
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
